<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="box box_3">
                <div class="case_box title_box">
                    <div class="title cl">
                        <div :class="{'list': true, 'select': commissionType === 1 }" @click="toggleType(1)">销售佣金</div>
                        <div :class="{'list': true, 'select': commissionType === 2 }" @click="toggleType(2)">挖矿佣金</div>
                    </div>
                </div>
                <div class="case_box mb_20">
                     <div class="gray_table text_c pb_20">
                        <v-data-table :data='getData' :currentData='dataList.records' :columns='columnsData' stripe :emptyText="not_data">
                            <template slot="td" slot-scope="props">
                                <div class="text_l" style="padding-left: 20%;" v-if="props.column.field === 'currency'">
                                    <img class="img mr_10" :src="img_url_appSource + props.item.currency + '.png'" />
                                    <span class="text">{{ props.content }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'socknumber'">
                                    <span class="text">{{ '0.00' }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'status'">
                                   <span class="text">{{ props.content === 1 ? '0.00' : props.item.cnumber }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'valuation'">
                                   <span class="text font_orange">{{ $convertRMB(props.item.cnumber) }}</span>
                                </div>
                                <span v-else>{{ props.content }}</span>
                            </template>
                        </v-data-table>
                        <!-- <div class="pagination_box pr_20" v-show="commissionType === 1">
                            <v-pagination @change="changeDataPage" :total="dataList.total" :show-total="showDataTotal" show-quick-jumper></v-pagination>
                        </div> -->
                    </div>
                </div>
                <div class="case_box desc_box mb_20">
                    <h2 class="bold">{{ commissionType === 1 ? '划转销售佣金' : '划转挖矿佣金' }}</h2>
                    <p class="desc">{{ commissionType === 1 ? '销售' : '挖矿' }}佣金一般是在订单通过审核挖矿后的第二天可见（T+3），正常每日到账时间为 14:00 - 22:00，如遇佣金到账拥堵或延期请您耐心等候，或可在帮助中心通过提交工单处理，感谢您的谅解与支持。</p>
                    <div class="currency_box">
                        <div :class="['list']" v-for="item of currencysList" :key="item.id" @click="toggleCurrencys(item)">
                            <div :class="['img_box pointer', dataRecords.currency === item.currency ? 'select' : '']">
                                <img :class="['img', (commissionType === 1 && item.currency !== 'USDT') || (commissionType === 2 && item.currency === 'USDT') ? 'opacity_filter' : '']" :src="img_url_appSource + item.logo" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="case_box form_box mb_20">
                    <v-form direction="horizontal">
                        <v-form-item class="border" label="划转路径" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text bold">
                                {{ commissionType === 1 ? '从销售佣金到钱包' : '从挖矿佣金到钱包' }}
                            </span>
                            <i class="iconfont">&#xe7ac;</i>
                        </v-form-item>
                        <v-form-item class="border" :label="commissionType === 1 ? '累计销售佣金' : '累计挖矿佣金'" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text">{{ dataForm.totalNumber + ' ' + dataRecords.currency }}</span>
                        </v-form-item>
                        <v-form-item class="border" label="已划转" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text">{{ dataForm.onuseNumber + ' ' + dataRecords.currency }}</span>
                        </v-form-item>
                        <v-form-item class="border" label="可划转数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text font_theme">{{ dataForm.canuseNumber + ' ' + dataRecords.currency }}</span>
                        </v-form-item>
                        <v-form-item class="border" label="本次划转数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-input class="input" placeholder="" v-model="dataForm.cnumber" type="number" @blur="calcMoney"></v-input>
                            <span class="tips">{{ dataRecords.currency }}</span>
                            <span class="font_orange va_m" v-show="dataForm.error">本次划转数量不可以大于可划转数量！！</span>
                        </v-form-item>
                        <v-form-item class="border" label="划转手续费" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-input class="input" placeholder="" v-model="dataForm.servicecharge" disabled></v-input>
                            <span class="tips">{{ commissionType === 1 ? '销售' : '挖矿' }}佣金的 3%</span>
                            <i class="iconfont">&#xe7ac;</i>
                        </v-form-item>
                        <v-form-item class="border" label="实际到账" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-input class="input" placeholder="" v-model="dataForm.payMoney" disabled></v-input>
                            <span class="tips">(实际到账  ≈ 本次划转数量  - 本次划转数量 * 3%)</span>
                        </v-form-item>
                        <v-form-item class="border" label="交易密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-input class="input" placeholder="" v-model="dataForm.payPassword" type="password"></v-input>
                            <span class="tips forgot" @click="jumpForgot(2)">忘记交易密码？</span>
                        </v-form-item>
                        <v-form-item class="" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-button class="btn" type="primary" size="large" @click="pushData()">立即支付</v-button>
                        </v-form-item>
                    </v-form>
                </div>
                <div class="case_box logs_box mb_20">
                    <div class="cl">
                        <h2 class="f_l bold">
                            <img class="img" :src="img_url_appSource + dataRecords.logo" />
                            {{ commissionType === 1 ? '销售佣金明细' : '挖矿佣金明细' }}
                        </h2>
                    </div>
                    <div class="content mt_30 gray_table text_c">
                        <v-data-table :data='getRecordsData' :currentData='dataRecords.records' :columns='columnsRecordsData' stripe :emptyText="not_data">
                            <template slot="td" slot-scope="props">
                                <div class="text_c" v-if="props.column.field === 'status'">
                                    <span class="font_green" v-if="props.content === 0">结算中</span>
                                    <span v-else-if="props.content === 1">已结算</span>
                                    <span v-else>{{ props.content }}</span>
                                </div>
                                <div v-else-if="props.column.field === 'operate'">
                                        <span class="font_theme pointer">查看订单</span>
                                    </div>
                                <div class="break_all" v-else>{{ props.content }}</div>
                            </template>
                        </v-data-table>
                        <div class="pagination_box pr_20">
                            <v-pagination @change="changeRecordsPage" :total="dataRecords.total" :show-total="showRecordsTotal" show-quick-jumper></v-pagination>
                        </div>
                    </div>
                </div>
                <div class="case_box logs_box mb_20">
                    <div class="cl">
                        <h2 class="f_l bold">
                            <img class="img mr_10" :src="img_url_appSource + dataRecords.logo" />
                            账单明细
                        </h2>
                    </div>
                    <div class="content mt_30 gray_table text_c">
                        <v-data-table :data='getData2' :columns='columns2' stripe :emptyText="not_data">
                            <template slot="td" slot-scope="props">
                                <div :class="['break_all', props.content.indexOf('+') ? 'font_green' : 'font_orange']" v-if="props.column.field === 'field_2'">
                                    {{ props.content }}
                                </div>
                                <div class="text_l" v-else-if="props.column.field === 'field_6'">
                                    {{ props.content }}
                                </div>
                                <div class="break_all" v-else>{{ props.content }}</div>
                            </template>
                        </v-data-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCurrencys } from '@doapis/currency/currency.js';
    import { getSalesRecords, getSalesDetail, pushCommissionDetail, getMiningCommissionRecords, getMiningCommissionDetail, getMiningCommissionRecordsDetail } from '@doapis/personal/wallet.js';
    
    export default {
        name: "salesCommission",
        props: {
            commission: {
                type: Number,
                default: 1
            }
        },
        data: function() {
            return {
                commissionType: 1,
                dataForm: {
                    cnumber: '',
                    servicecharge: '',
                    payMoney: '',
                    payPassword: '',
                    error: false,
                },
                dataList: {
                    current: 1,
                    records: [],
                    total: 0
                },
                dataRecords: {
                    current: 1,
                    currency: '',
                    logo: '',
                    records: [],
                    total: 0
                },
                columnsData:[
                    { title:"币种", field:'currency', width: '16%' },
                    { title:"持有数量", field:'cnumber', width: '16%' },
                    { title:"锁定数量", field:'socknumber', width: '16%' },
                    { title:"可用数量", field:'status', width: '16%' },
                    { title:"估值($)", field:'valuation', width: '16%' },
                ],
                columnsRecordsData:[
                    { title:"单号", field:'orderNo', width: '11.22%' },
                    { title:"订单金额", field:'orderprice', width: '11.11%' },
                    { title:"购买人", field:'friendPhone', width: '11.11%' },
                    { title:"推荐关系", field:'recommend', width: '11%' },
                    { title:"佣金比例", field:'orderproportion', width: '11%' },
                    { title:"佣金金额", field:'cnumber', width: '11.11%' },
                    { title:"到账时间", field:'createTime', width: '11.22%' },
                    { title:"挖矿状态", field:'status', width: '11.11%' },
                    { title:"操作", field:'operate', width: '11.11%' },
                ],
                columns2:[
                    { title:"序号", field:'field_1', width: '12.5%' },
                    { title:"操作金额", field:'field_2', width: '12.5%' },
                    { title:"操作类型", field:'field_3', width: '12.5%' },
                    { title:"销售佣金余额", field:'field_4', width: '12.5%' },
                    { title:"账户类型", field:'field_5', width: '12.5%' },
                    { title:"到账时间", field:'field_6', width: '12.5%' },
                    { title:"操作单号", field:'field_7', width: '12.5%' },
                    { title:"操作", field:'field_8', width: '12.5%' },
                ],
                currencysList: [],
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                const dataMethod = this.commissionType === 1 ? getSalesRecords : getMiningCommissionRecords;
                
                return params ? $.$getPromiseNullData() : dataMethod({
                    boolhasMoney: true,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    that.dataList.records = res.data.records;
                    that.dataList.total = res.data.total;
                    that.getCurrencys();
                    that.getDetail();
                });
            },
            getCurrencys: function() {
                const that = this;
                getCurrencys({ boolhasAll: true }).then(function(res) {
                    let data = res.records;
                    const index = that.commissionType === 1 ? 0 : 1;
                    that.currencysList = data;

                    data = that.commissionType === 1 ? data[0] : data[1];
                    that.toggleCurrencys({
                        currency: data.currency,
                        remark2: data.remark2,
                        logo: data.logo
                    });
                });
            },
            toggleCurrencys: function(params) {
                if ((this.commissionType === 1 && params.currency !== 'USDT') || (this.commissionType === 2 && params.currency === 'USDT')) return;
                this.dataRecords.currency = params.currency;
                this.dataRecords.logo = params.logo;
                this.getRecordsData();
            },
            getRecordsData: function(params) {
                const that = this;
                const dataMethod = this.commissionType === 1 ? getSalesRecords : getMiningCommissionRecordsDetail;

                return params ? $.$getPromiseNullData() : dataMethod({
                    current: that.dataRecords.current,
                    currency: this.commissionType === 1 ? undefined : that.dataRecords.currency,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    const data = res.data.records;
                    data.forEach(function(item) {
                        item.orderprice = (item.orderprice * item.ordernumber).toFixed(2);
                        item.orderproportion = item.orderproportion + '%'
                        item.createTime = item.createTime ? $.$getFormatMD(new Date(item.createTime), true).split(' ') : '数据错误' ;
                    });
                    
                    that.dataRecords.records = data;
                    that.dataRecords.total = res.data.total;
                });
            },
            getData2: function() {
                return $.$getPromiseNullData();
            },
            getDetail: function(val) {
                const that = this;
                const dataMethod = this.commissionType === 1 ? getSalesDetail : getMiningCommissionDetail;
                dataMethod({
                    currency: that.dataRecords.currency,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    const data = {
                        canuseNumber: res.data.canuseNumber,
                        onuseNumber: res.data.onuseNumber,
                        totalNumber: res.data.totalNumber
                    };
                    that.$set(that, 'dataForm', Object.assign(that.dataForm, data));
                });
            },
            pushData: function() {
                const that = this;
                const dataForm = that.dataForm;
                let tipsText = '';
                if (Number(dataForm.cnumber) <= 0) {
                    tipsText = '请输入本次划转数量！！';
                } else if (!$.testPassword(dataForm.payPassword)) {
                    tipsText = '请填写6-16位，由数字和字母组成的密码！！'
                }

                if (tipsText) {
                    that.$notification.error({
                        message: '操作错误！！',
                        description: tipsText,
                    });
                } else {
                    pushCommissionDetail({
                        data: {
                            currency: dataForm.currency,
                            cnumber: dataForm.cnumber,
                            servicecharge: dataForm.servicecharge,
                            payPassword: dataForm.payPassword,
                            payMoney: dataForm.payMoney,
                            incomeRransferType: this.commissionType === 1 ? 'sales' : 'power',
                            memberid: that.userDATA.memberid
                        },
                        alertError: true
                    }).then(function(res) {
                        if (res.success) {
                            $('.ant-tabs-tab').eq(0).click();
                            $('#app').scrollTop(0);
                        }
                    });
                }
            },
            // showDataTotal: function(val) {
            //     return '全部' + this.dataList.total + '条';
            // },
            // changeDataPage: function(val) {
            //     this.dataList.current = val;
            //     this.getData();
            // },
            showRecordsTotal: function(val) {
                return '全部' + this.dataRecords.total + '条';
            },
            changeRecordsPage: function(val) {
                this.dataRecords.current = val;
                this.getRecordsData();
            },
            calcMoney: function() {
                const error = this.dataForm.cnumber > this.dataForm.canuseNumber ? true : false;
                this.dataForm.error = error;
                if (error) return;
                const cnumber = this.dataForm.cnumber;
                const data = {
                    servicecharge: (cnumber * 0.03).toFixed(2),
                    payMoney: (cnumber - (cnumber * 0.03)).toFixed(2)

                };
                Object.assign(this.dataForm, data);
            },
            toggleType: function(val) {
                this.commissionType = val;
                this.dataForm = {
                    cnumber: '',
                    servicecharge: '',
                    payMoney: '',
                    payPassword: ''
                };
                this.getData();
            },
            // 忘记密码
            jumpForgot: function(type) {
                this.$router.push({ path: '/login_register/forgot', query: { type }});
            },
            $convertRMB: $.$convertRMB
        },
        mounted: function() {
            this.commissionType = this.commission;
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
    }
    .content_box{
        .box{
            &.box_3{
                .case_box{
                    background-color: white;
                    .img{
                        width: 26px;
                        display: inline;
                        vertical-align: middle;
                    }
                }
                .title_box{
                    padding: 20px 0;
                    border: 1px solid #DDD;
                }
                .title{
                    width: 280px;
                    line-height: 34px;
                    margin: 0 auto;
                    font-size: 16px;
                    text-align: center;
                    border-radius: 34px;
                    overflow: hidden;
                    cursor: pointer;
                    .list{
                        float: left;
                        width: 50%;
                        color: #999;
                        border: 1px solid #DDD;
                        box-sizing: border-box;
                        transition: background-color 0.8s;
                        &:first-child{
                            border-right: none;
                            border-radius: 34px 0 0 34px;
                        }
                        &:last-child{
                            border-radius: 0 34px 34px 0;
                        }
                        &.select{
                            color: white;
                            background-color: @theme_color;
                        }
                    }
                }
                .desc_box{
                    padding: 20px;
                    .desc{
                        margin-top: 10px;
                        font-size: 10px;
                        color: #999;
                    }
                    .currency_box{
                        .flex_row_wrap;
                        padding: 40px 0 20px 0;
                        .list{
                            width: 16.66%;
                            margin-bottom: 20px;
                            .img_box{
                                width: 70px;
                                margin: 0 auto;
                                line-height: 70px;
                                border-radius: 8px;
                                text-align: center;
                                border:2px solid white;
                                background-color: #FCFCFC;
                                &.select{
                                    color: white;
                                    border-color: @theme_color;
                                }
                                .img{
                                    width: 60%;
                                    display: inline;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
                .form_box{
                    /deep/ label{
                        font-size: 13px;
                        color: #999;
                        vertical-align: text-bottom;
                    }
                    /deep/ .ant-form-item{
                        padding: 30px 0;
                        margin-bottom: 0;
                        font-size: 14px;
                        color: #333;
                        &.border{
                            border-bottom: 1px solid #efeff4;
                        }
                        &.bold label{
                            font-size: 18px;
                            color: #333;
                        }
                    }
                    /deep/ .ant-form-item-label{
                        width: 22%;
                        padding-left: 20px;
                        text-align: left;
                    }
                    .iconfont{
                        font-size: 14px;
                        color: #999;
                        vertical-align: unset;
                    }
                    .tips{
                        margin-left: 10px;
                        font-size: 13px;
                        vertical-align: middle;
                    }
                    .forgot{
                        color: @theme_color;
                        cursor: pointer;
                    }
                    .input{
                        width: 160px;
                        border: 2px solid black;
                        box-sizing: content-box;
                    }
                    .btn{
                        width: 180px;
                        height: 36px;
                        text-align: center;
                        border-radius: 34px;
                        box-sizing: border-box;
                        .orange_linear_ellipsis_btn;
                    }
                }
                .logs_box{
                    padding: 20px 0;
                    h2.bold{
                        padding: 0 20px;
                    }
                    /deep/ .ant-table-thead>tr>th{
                        background-color: #F7F7F7;
                    }
                    /deep/ .ant-table-tbody>tr:nth-child(2n-1){
                        background-color: white;
                    }
                }
            }
        }
    }
</style>
